<template>
  <div>
    <van-nav-bar
      title="消息中心"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.push({name: 'home'})"
      @click-right="allRead"
    >
      <template #right>
        全部已读
      </template>
    </van-nav-bar>
    <div class="list">
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-list
          finished-text="没有更多了, 下拉刷新"
          finished="true"
          @load="onLoad"
        >
          <van-cell
            v-for="item in list"
            :key="item.id"
            @click="
              $router.push({ name: 'noticeDetail', params: { id: item.id } })
            "
          >
            <div class="itemmes" :class="item.read == 1 ? 'on' : ''">
              <span>{{ item.content }}</span>
              <img src="../../assets/image/my/mores.png" />
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Toast } from "vant";
import userStore from "../../store/user";
import commonStore from '../../store/common'

const common = commonStore() 
const allRead = () => { 
  user.messReadAll().then(() => { 
    Toast.success('全部已读')
    common.userInfo.user_message_count = 0
    //list.value.map(item => item.read = 1)
  })
}

const user = userStore();
const list = ref([]);
const getList = () => {
  user.getMessList().then((result) => {
    list.value = result;
    Toast.clear();
    loading.value = false;
  });
};

const loading = ref(false);
const onRefresh = () => {
  loading.value = true;
  list.value = [];
  getList();
};
Toast.loading("加载中...");
getList();
</script>

<style lang="scss" scoped>
.list {
  padding-top: 50px;
  padding-bottom: 20px;
  .itemmes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    font-weight: bold;

    span {
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &.on {
      color: #767676;
    }
    img {
      width: 15px;
      height: 15px;
    }
  }
}
.van-nav-bar__title { 
  font-weight: bold;
}
</style>